<template>
	<!--重点产品现状分析功能  其他产品-->
	<div class="product-otherproducts">
		<div class="return">
			<p @click="back">返回</p>
		</div>
		<el-row :gutter="20">
			<el-col span="11">
				<chart-block chartID="chart1" :title="shadowLineOptionData.title" :optionData="shadowLineOptionData" chartType="getShadowLine" height="38vh" ></chart-block>
				<chart-block chartID="chart2" :title="pictorialBarOptionData.title" :optionData="pictorialBarOptionData" chartType="getPictorialBar" height="38vh" style="margin-top:3vh" ></chart-block>
			</el-col>
			<el-col span="13">
				<normal-block chartID="chart3" :title="normalBlockTitle" :isTitle="isTitle" height="79vh">
					<template>
						<div class="table-title">
							<p class="year">年份</p>
							<p class="output">总产量</p>
							<p class="production">总产值</p>
						</div>
						<el-row>
							<el-col span="14">
								<chart-block chartID="chart4" :optionData="outputOption" chartType="getInfeedBarRadius" height="70vh" style="margin-top:0vh;background:rgba(0,0,0,0);border:none;box-shadow: none;width:100%" :isTitle="false"></chart-block>
							</el-col>
							<el-col span="10">
								<chart-block chartID="chart5"  :optionData="outputOption2" chartType="getInfeedBarRadius" height="70vh" style="margin-top:0vh;background:rgba(0,0,0,0);border:none;box-shadow: none;width:100%" :isTitle="false"></chart-block>
							</el-col>
						</el-row>
					</template>
            	</normal-block>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import {getCommonData10} from '@/api/pages.js'
export default {
	name: "product-otherproducts",
	components: {
		ChartBlock: () => import('@/components/chart-block'),
		NormalBlock: () => import('@/components/normal-block'),
	},
	props: {},
	data() {
		return {
			shadowLineOptionData:{
				title:'',
				categoryAxis:[], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				smooth:true,
				legendPosition:"center",
				LinearGradientColor:[
					{
						topColor:'rgba(71,253,255,0.5)',
						bottomColor:'rgba(71,253,255,0.1)',
						LineCircleColor:"#47fdff",//折线图颜色
						LineCircleBorderColor:"#47fdff",//折线图描边颜色
					},
				]
			},
			shadowLineOptionDataShow:false,
			pictorialBarOptionData:{
				title:'',
				categoryAxis:[], //类目轴数据
				seriesData: [
					{
						name: '', //如果有图例，这个就不能为空
						data: [], //数据
						unit: '', //数据的单位
					},
				],
				smooth:true,
				legendPosition:"center",
				LinearGradientColor: [//柱状图渐变色
					{
						topColor: '#ffc35c',
						bottomColor: '#ff6e01'
					},
				],
			},
			pictorialBarOptionDataShow:false,
			isTitle:false,
			outputOption:{
				categoryAxis:[], //类目轴数据
                seriesData:{
					data:[],
					shadowData:[],
					unit:"吨"
				},
				shadowBarGradientColor: {//渐变色
                  topColor: 'rgba(24,38,68,0.5)',
                  bottomColor: 'rgba(175,76,69,0)'
				},
				yaxisLabel:true,
				labelColor:"#fe7836",
                symbol: "image://",
			},
			outputOption2:{
				categoryAxis:[], //类目轴数据
                seriesData:{
					data:[],
					shadowData:[],
					unit:"万元"
				},
				shadowBarGradientColor: {//渐变色
                  topColor: 'rgba(0,0,0,0)',
                  bottomColor: 'rgba(0,0,0,0)'
				},
				yaxisLabel:false,
				labelColor:"#01d579",
				symbol: "image://",

			},
		}
	},
	computed: {},
	created() {

	},
	mounted() {
		this.otherproductsOutput()
		this.otherproductsProduction()
		this.otherProductionAndOutput()
	},
	methods: {
		//返回
        back(){
            this.$router.go(-1)
		},
		//其他产品详情-产量变化（棉花除外）
		otherproductsOutput(){
			getCommonData10({busiCode: 'E111',cpmc:this.$route.query.name}).then(res => {
				if (res.data.code === 200) {
					this.shadowLineOptionData.title = res.data.data.title
					this.shadowLineOptionData.categoryAxis = res.data.data.categoryAxis
					this.shadowLineOptionData.seriesData = res.data.data.seriesData
					this.shadowLineOptionDataShow = true
				}
			}).catch(err => {})
		},
		//其他产品详情-产值变化（棉花除外）
		otherproductsProduction(){
			getCommonData10({busiCode: 'E112',cpmc:this.$route.query.name}).then(res => {
				if (res.data.code === 200) {
					this.pictorialBarOptionData.title = res.data.data.title
					this.pictorialBarOptionData.categoryAxis = res.data.data.categoryAxis
					this.pictorialBarOptionData.seriesData = res.data.data.seriesData
					this.pictorialBarOptionDataShow = true
				}
			}).catch(err => {})
		},
		//其他产品详情-总产量、总产值列表（棉花除外）
		otherProductionAndOutput(){
			getCommonData10({busiCode: 'C054',cpmc:this.$route.query.name}).then(res => {
				if (res.data.code === 200) {
					let max1 = Math.max(...res.data.data.list.map(x => x.zcz));
					let max2 = Math.max(...res.data.data.list.map(x => x.zcl));
					this.outputOption.categoryAxis=[]
					this.outputOption.seriesData.data=[]
					this.outputOption.seriesData.shadowData=[]
					this.outputOption2.categoryAxis=[]
					this.outputOption2.seriesData.data=[]
					this.outputOption2.seriesData.shadowData=[]
					this.outputOption.seriesData.unit=res.data.data.list[0].zclUnit
					this.outputOption2.seriesData.unit=res.data.data.list[0].zczUnit
					res.data.data.list.forEach((item,index)=>{
						this.outputOption.categoryAxis.push(item.year)
						this.outputOption.seriesData.data.push(item.zcl)
						this.outputOption.seriesData.shadowData.push(max2)
						this.outputOption2.categoryAxis.push(item.year)
						this.outputOption2.seriesData.data.push(item.zcz)
						this.outputOption2.seriesData.shadowData.push(max1)
					})
				}
			}).catch(err => {})
		},
	},
	watch: {}
}
</script>

<style scoped lang="scss">
.product-otherproducts {
	width:100%;
	height:100%;
	padding: 1.1vh 2.86vw 4.63vh;
	.return{
        color: #03d3ff;
        display: flex;
        justify-content: flex-end;
        padding: 1.9vh 0;
        p{
            background:url("../../assets/images/return.png") top center no-repeat;
		    background-size:100% 100%;
            height: 3.7vh;
            line-height: 3.7vh;
            text-align: right;
            padding-right: 1.3vh;
            width: 4.6vw;
            cursor: pointer;
            font-size: 0.8vw;
        }
    }
	.table-title{
		width: 100%;
		color: #FFF;
		display: flex;
		font-size: 0.8vw;
		border-bottom: 1px solid #0e7fd6;
		.year{
			width: 10%;
			text-align: center;
			height: 4.1vh;
			line-height:4.1vh ;
		}
		.output{
			width: 45%;
			text-align: center;
			height: 4.1vh;
			line-height:4.1vh ;
		}
		.production{
			width: 45%;
			text-align: center;
			height: 4.1vh;
			line-height:4.1vh ;
		}
	}
}
</style>
